<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title=" true ? '代理商详情' : '' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="代理商号">
            {{ vdata.detailData['agentNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="代理商名称">
            {{ vdata.detailData['agentName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="登录名">
            {{ vdata.detailData['loginUsername'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="代理商简称">
            {{ vdata.detailData['agentShortName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData['type'] === 2" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="服务商号">
            {{ vdata.detailData['isvNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData['type'] === 2" :sm="12">
        <a-descriptions>
          <a-descriptions-item label="服务商名称">
            {{ vdata.isvName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人姓名">
            {{ vdata.detailData['contactName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人手机号">
            {{ vdata.detailData['contactTel'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="状态">
            <a-tag :color="vdata.detailData['state'] === 1?'green':'volcano'">
              {{ vdata.detailData['state'] === 0?'禁用':vdata.detailData['state'] === 1?'启用'
                :vdata.detailData['state'] === 2?'待审核':vdata.detailData['state'] === 3?'审核驳回'
                  :vdata.detailData['state'] === 4?'未认证':'未知' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人邮箱">
            {{ vdata.detailData['contactEmail'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="备注">
          <a-input
            v-model:value="vdata.detailData['remark']"
            type="textarea"
            disabled="disabled"
            style="height: 50px"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row justify="space-between" type="flex">
      <a-col :span="24">
        <a-divider orientation="left">
          <a-tag color="#FF4B33">
            账户信息
          </a-tag>
        </a-divider>
      </a-col>
    </a-row>
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="代理商类型">
            {{ vdata.detailData['agentType'] == "1" ? '个人':'企业' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="收款账户类型">
            {{ vdata.detailData['settAccountType'] === "WX_CASH"? '个人微信':vdata.detailData['settAccountType'] === "ALIPAY_CASH"? '个人支付宝':vdata.detailData['settAccountType'] === "BANK_PUBLIC"? '对公账户':vdata.detailData['settAccountType'] === "BANK_PRIVATE"? '对私账户':'银行卡' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-row v-if="vdata.detailData['settAccountType'] === 'WX_CASH' || vdata.detailData['settAccountType'] === 'ALIPAY_CASH'" justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item :label="vdata.detailData['settAccountType'] === 'ALIPAY_CASH'?'支付宝账号':'个人微信号'">
            {{ vdata.detailData['settAccountNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-row v-if="vdata.detailData['settAccountType'] === 'BANK_PRIVATE'" justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="收款银行卡号">
            {{ vdata.detailData['settAccountNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-row v-if="vdata.detailData['settAccountType'] === 'BANK_PUBLIC'" justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="对公账户名称">
            {{ vdata.detailData['settAccountName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="对公账号">
            {{ vdata.detailData['settAccountNo'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="开户银行名称">
            {{ vdata.detailData['settAccountBank'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="开户行支行名称">
            {{ vdata.detailData['settAccountSubBank'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>

    <a-col :sm="24">
      <a-divider orientation="left">
        <a-tag color="#FF4B33">
          资料信息
        </a-tag>
      </a-divider>
    </a-col>
    <a-row justify="space-between" type="flex">
      <a-col v-if="vdata.detailData['agentType'] == 2" :sm="12">
        <a-form-item label="营业执照照片" name="licenseImg">
          <JeepayUpload v-if="vdata.detailData['licenseImg']" v-model:src="vdata.detailData['licenseImg']" bizType="applyment" />
        </a-form-item>
      </a-col>
      <a-col v-if="vdata.detailData['agentType'] == 2 && vdata.detailData['settAccountType'] == 'BANK_PUBLIC'" :sm="12">
        <a-form-item label="开户许可证照片" name="permitImg">
          <JeepayUpload v-if="vdata.detailData['permitImg']" v-model:src="vdata.detailData['permitImg']" bizType="applyment" />
        </a-form-item>
      </a-col>
      <a-col :sm="12">
        <a-form-item :label="vdata.detailData['agentType'] == 1?'[联系人]身份证人像面照片':'[法人]身份证人像面照片'" name="idcard1Img">
          <JeepayUpload v-if="vdata.detailData['idcard1Img']" v-model:src="vdata.detailData['idcard1Img']" bizType="applyment" />
        </a-form-item>
      </a-col>
      <a-col :sm="12">
        <a-form-item :label="vdata.detailData['agentType'] == 1?'[联系人]身份证国徽面照片':'[法人]身份证国徽面照片'" name="idcard2Img">
          <JeepayUpload v-if="vdata.detailData['idcard2Img']" v-model:src="vdata.detailData['idcard2Img']" bizType="applyment" />
        </a-form-item>
      </a-col>
      <a-col :sm="12">
        <a-form-item label="[联系人]手持身份证照片" name="idcardInHandImg">
          <JeepayUpload v-if="vdata.detailData['idcardInHandImg']" v-model:src="vdata.detailData['idcardInHandImg']" bizType="applyment" />
        </a-form-item>
      </a-col>
      <a-col v-if="vdata.detailData['settAccountType'] == 'BANK_PRIVATE'" :sm="12">
        <a-form-item label="银行卡照片" name="bankCardImg">
          <JeepayUpload v-if="vdata.detailData['bankCardImg']" v-model:src="vdata.detailData['bankCardImg']" bizType="applyment" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { API_URL_AGENT_LIST, API_URL_ISV_LIST, req } from '@/api/manage'
  import {defineProps,reactive} from 'vue'

    const props = defineProps({
      callbackFunc: { type: Function,default:null }
  })

    const vdata = reactive({
        btnLoading: false,
        detailData: {}, // 数据对象
        recordId: null, // 更新对象ID
        visible: false, // 是否显示弹层/抽屉
        isvList: [], // 服务商下拉列表
        isvName: '' // 服务商名称
    })

    function show (recordId) { // 弹层打开事件
        vdata.detailData = { 'state': 1, 'type': 1 } // 数据清空
        
        vdata.recordId = recordId
        req.getById(API_URL_AGENT_LIST, recordId).then(res => {
          vdata.detailData = res
        })
        req.list(API_URL_ISV_LIST, { 'pageSize': null }).then(res => { // 服务商下拉选择列表
          vdata.isvList = res.records
          for (let i = 0; i < vdata.isvList.length; i++) {
            if (vdata.detailData['isvNo'] === vdata.isvList[i]['isvNo']) {
              vdata.isvName = vdata.isvList[i]['isvName']
            }
          }
        })
        vdata.visible = true
      }
      function onClose () {
        vdata.visible = false
      }
defineExpose({
  show //抛出show函数给父组件
})
</script>
